<!--
    报警警情
 * @Author: zhanbh
 * @Date: 2021-04-08 10:46:41
 * @project: 天津YQ平台
-->
<template>
  <div class="info-110">
    <el-form ref="form" label-width="80px">
      <div class="table-filter table-filter-home">
        <div>
          <el-form-item label="发布时间:">
            <el-date-picker
              v-model="publishTime"
              clearable
              type="datetimerange"
              value-format="yyyyMMddHHmm"
              format="yyyy-MM-dd HH:mm"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="发布单位:">
            <dg-tree-drop
                 v-model="fbdwdm"
                 :code="BM_DEPT"
                 :check-strictly="true"
                 :props="props" lazy-load
                 filterable clearable
                 value-name="value"
                 label-name="label"
                 style="width: 100%"
                 multiple
                 collapse-tags
                 :cacheable="true"
            ></dg-tree-drop>
            <!-- <el-cascader v-model="fbdwdm" :options="constant.BM_DEPT" :show-all-levels="false" clearable /> -->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="最晚反馈时间:" label-width="120px">
            <el-date-picker
              v-model="time"
              clearable
              type="datetimerange"
              value-format="yyyyMMddHHmm"
              format="yyyy-MM-dd HH:mm"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="指令状态:">
            <dg-select v-model="condition.qszt.value" :data="constant.BM_QSFKZT" clearable />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="关键词:">
            <el-input v-model="condition.keys.value" placeholder="报警内容、标题" clearable />
          </el-form-item>
        </div>
        <div>
          <el-form-item class="operate-btns">
            <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="info-110__list">
      <dg-table class="table" ref="table" url="/v1/zl/searchJs" :condition="condition">
        <dg-table-column label="序号" type="index" width="70" fixed="left" />

        <dg-table-column label="发布时间" :width="200">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.fbsj  | filterValue}}</span>
          </template>
        </dg-table-column>

        <dg-table-column label="关联警情" prop="glxx">
          <template slot-scope="{ row }">
            <span
              v-if="!$lodash.isEmpty( row.glxx )"
              class="v-link"
              @click="() => $router.push({ path: `/police-information/alarm-handle-detail/${row.flowid}` })"
              >{{ row.glxx }}</span
            >
            <span v-else>-</span>
          </template>
        </dg-table-column>

        <dg-table-column label="最晚反馈时间" :width="190">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.zwfksj | filterValue }}</span>
          </template>
        </dg-table-column>

        <dg-table-column label="发布单位">
          <template slot-scope="{ row }">
            <span v-if="!$lodash.isEmpty( row.zlxx.fbdwdm )"  v-translate="{ code: BM_DEPT, value: row.zlxx.fbdwdm }"></span>
            <span v-else>-</span>
          </template>
        </dg-table-column>

        <dg-table-column label="发布人">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.fbrxm  | filterValue}}</span>
          </template>
        </dg-table-column>

        <dg-table-column label="指令状态">
          <template slot-scope="{ row }">
            <div>
              <span v-if="!$lodash.isEmpty(row.qszt)" v-translate="{ code: BM_QSZT, value: row.qszt }"></span>
              <span v-else>-</span>
              /
              <span v-if="!$lodash.isEmpty(row.fkzt)" v-translate="{ code: BM_FKZT, value: row.fkzt }"></span>
              <span v-else>-</span>
            </div>
          </template>
        </dg-table-column>

        <dg-table-column label="备注">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.zlbz  | filterValue}}</span>
          </template>
        </dg-table-column>

        <dg-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" v-permission="['JQXX_QS']" @click="onSign(row)" :disabled="row.qszt === '1'"
              >签收</el-button
            >
            <el-button
              type="text"
              v-permission="['JQXX_XB']"
              :disabled="row.qszt === '0'"
              @click="() => $router.push({ name: 'AlarmHandleResubmit', params: { id: row.id, zlid: row.id,jqxxBh:row.jqxxbh } })"
            >
              续报
            </el-button>
            <el-button
              v-permission="['JQXX_ZL']"
              type="text"
              @click="() => $router.push({ name: 'AlarmHandleOrder', params: { id: row.id, zlly: '2',flowid:row.flowid } })"
            >
              指令
            </el-button>
          </template>
        </dg-table-column>
      </dg-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { onSignIn } from '@/api/common';
import { deepClone } from '@/utils/common';
import { BM_DEPT, BM_QSFKZT, BM_FKZT, BM_QSZT } from '@/common/codeDic';
export default {
  name: 'AlarmHandleHome',
  data() {
    return {
      BM_DEPT,
      BM_QSFKZT,
      BM_FKZT,
      BM_QSZT,
      fbdwdm: [],
      publishTime: [],
      time: [],
      cloneCondition: null,
      condition: {
        query_zlxx: {
          value: true,
          op: '='
        },
        zlly: {
          value: '2',
          op: '='
        },
        qszt: {
          value: '',
          op: '='
        },
        keys: {
          value: '',
          op: '='
        },
        zwfksj: {
          value: '',
          op: '='
        },
        fbdwdm: {
          value: '',
          op: '='
        },
        fbsj: {
          value: '',
          op: '='
        }
      },
     props: {
           value: "value"
            },
    };
  },
  computed: {
    ...mapState(['constant'])
  },
  watch: {
    fbdwdm(val) {
      this.condition.fbdwdm.value = val.length ? val : '';
    },
    time(val) {
      this.condition.zwfksj.value = val ? `${val[0]},${val[1]}` : '';
    },
    publishTime(val) {
      this.condition.fbsj.value = val ? `${val[0]},${val[1]}` : '';
    }
  },
  activated() {
    this.$refs.table.searchForm();
  },
  mounted() {
    this.$store.dispatch('getConstant', [ 'BM_QSFKZT']);
      this.$store.dispatch('getConstantTree', ['BM_DEPT']);
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    reset() {
      this.time = null;
      this.publishTime = null;
      this.fbdwdm=[]
      this.condition = deepClone(this.cloneCondition);
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    onSign(row) {
      this.$confirm('确认签收?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '签收中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        onSignIn(row.id)
          .then(() => {
            this.$message.success('签收成功');
            this.$refs.table.searchForm();
            loadingInstance.close();
          })
          .catch(() => {
            this.$message.warning('签收失败');
            loadingInstance.close();
          });
      });
    }
  },
  filters:{
    // 判空
     filterValue(val){
       let result="-";
       if(val){
         result=val;
       }
       return result;
     }
  }
};
</script>

<style lang="scss" scoped>
.info-110 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 11rem);
  overflow: hidden;
  .check-box {
    display: flex;
    /deep/.checkbox-group {
      text-align: left;
    }
    /deep/ .el-checkbox {
      margin-right: 6px;
    }
  }
  &__list {
    flex-shrink: 1;
    flex-grow: 1;
    margin-top: 10px;
    background-color: #fff;
    padding: 1.5rem 2rem;
  }
}
</style>
